<!DOCTYPE html>
<customCss>
<style>
span.error {
	color: red;
}
</style>
</customCss>
<section class="content-header" style="padding: 3px 15px 0 15px;">
	<ol class="breadcrumb" id="nav_title"
		style="position:static;float:none;margin-bottom: 5px;">
		<li class="active"><i class="fa fa-home"
			style="font-size:20px;position:relative;top:2px;left:-3px;"></i>
			&nbsp; <a href="${rc.contextPath}/sys/index">首页</a>
		</li>
		<li class="active">系统管理</li><li class="active">角色管理</li>
	</ol>
</section>
<div class="container-fluid">
	<div class="box box-primary">
		 <div id="toolbar">
			<button id="" type="button" class="btn" data-toggle="modal" data-target="#modal-add"
				style="margin-left:0px;padding:3px 18px;background:#3399fe;color:#fff;">新增</button>
			<button id="edit" type="button" class="btn" data-toggle="modal" style="margin-left:10px;padding:3px 18px;background:#3399fe;color:#fff;">编辑</button>
		</div>

		<div class="row">
			<table id="table" data-toggle="table" data-url="sysroleList" data-toolbar="#toolbar"
				data-pagination="true" data-search="true" data-striped="true"
				data-page-size="10" >
				<thead>
					<tr>
						<th data-checkbox="true"></th>
						<th data-align="center" data-field="roleName" data-sortable="true">角色</th>
						<th data-align="center" data-field="roleInfo" data-sortable="true">角色描述</th>
						<th data-align="center" data-formatter="createDate" data-field="createDate" data-sortable="true">创建时间</th>
						<th data-align="center" data-formatter="operateFormatter"
							data-events="operateEvents">编辑角色权限</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>
<!-- 新增用户的弹窗 -->
<div class="modal fade" id="modal-add" aria-labelledby="modalAddLabel"
	aria-hidden="true" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<form class="form-horizontal" action="" method="post"
				id="addRoleForm">
				<input name="roleId" id="roleId" type="hidden" class="form-control">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="modalEditLabel">新增角色</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label class="col-sm-3 control-label" >角色名称</label>
						<div class="col-sm-9">
							<input name="roleName" type="text" class="form-control" maxlength="10"
								placeholder="请输入角色名称" >
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" style="vertical-align:middle">角色描述</label>
						<div class="col-sm-9">
							<input name="roleInfo" type="text" class="form-control"  maxlength="20"
								placeholder="请输入角色描述信息" >
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default closeBtn" data-dismiss="modal">关闭</button>
					<button type="submit" id="saveBtn" class="btn btn-primary">保存</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 修改角色的弹窗 -->
<div class="modal fade" id="modal-edit" aria-labelledby="modalEditLabel"
	aria-hidden="true" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<form class="form-horizontal" action="" method="post"
				id="updateRoleForm">
				<input name="roleId" id="roleId1" type="hidden" class="form-control" value="">
				
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="modalEditLabel">修改角色</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label class="col-sm-3 control-label">角色名称</label>
						<div class="col-sm-9">
							<input name="roleName1" id="roleName1" type="text" class="form-control" maxlength="10"
								placeholder="请输入角色名称">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">角色描述</label>
						<div class="col-sm-9">
							<input name="roleInfo1" type="text" class="form-control" maxlength="20"
								placeholder="请输入角色描述信息">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" id="saveBtn1" class="btn btn-primary">保存</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 查看角色权限 -->
<div class="modal fade" id="modal-edit1"
	aria-labelledby="modalEditLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form class="form-horizontal" action="" id="roleAuth">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="modalEditLabel">编辑权限</h4>
				</div>
				<input type="hidden" name="roleId" value=""> <input
					type="hidden" name="authId" value="">
				<div class="modal-body">
					<div class="row-fluid">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" id="sabet" class="btn btn-primary">保存</button>
				</div>
			</form>
		</div>
	</div>
</div>
<customScript>
<link rel="stylesheet" href="${rc.contextPath}/assets/zTree/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${rc.contextPath}/assets/zTree/js/jquery.ztree.all-3.5.min.js"></script> 
<script type="text/javascript" src="${rc.contextPath}/views/admin/system/sysrole.js"></script>
<script type="text/javascript">
	function operateFormatter(value, row, index) {
		return [
			"<a class='label label-primary' id='showRole' href='javascript:void(0)' >角色权限</a>",
		].join('');
	}
	function createDate(value, row, index) {
		var JsonDateValue = new Date();
		JsonDateValue.setTime(row.createDate);
		var text = JsonDateValue.getFullYear()+"-"+(JsonDateValue.getMonth()+1) +"-"+JsonDateValue.getDate()+" "+JsonDateValue.getHours()+":"+JsonDateValue.getMinutes()+":"+JsonDateValue.getSeconds();
		var time = row.createDate;
		if(time==null){
           	return "";
        }else{
            return [
				"<span>"+time+"</span>"
			].join('');	
       	}
	}
</script>
</customScript>